<!-- 表格模块 -->
<div class="table-module">
    <div style="display: flex;justify-content: space-between;">
        <div class="module-header">
            <i class="el-icon-tickets"></i>
            <span class="table-title-info">{{abc.bname}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{abc.cname}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{queryinfo.name1}}</span>
            <span class="table-title-info"> / </span>
            <span class="table-title-info">{{queryinfo.name2}}</span>
        </div>
        <div>
            <!-- 操作按钮组 -->
            <div class="action-buttons">
                <el-button-group>
                    <el-button type="primary" @click="action('add')" icon="el-icon-plus">{{dialogTitle}}</el-button>
                    <el-button type="warning" @click="action('edit')" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" icon="el-icon-download" @click="action('delete')" >删除</el-button>

                </el-button-group>
            </div>
        </div>
    </div>
    <div class="table-container">
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ background: 'rgba(4, 28, 75, 0.8)', color: '#fff' }"
                border
                @selection-change="handleSelectionChangeTable"
        >

            <el-table-column type="selection" label="选择" width="60" align="center"></el-table-column>

<!--            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>-->

            <el-table-column  prop="name" label="名称"  align="center"  >
                <template slot-scope="scope">
                    <div>{{scope.row.name}}</div>
                </template>
            </el-table-column>
            <el-table-column  prop="code" label="编码"  align="center" :width="200" >
                <template slot-scope="scope">
                    <div>
                        <span style="color:green;font-weight: bold;">{{scope.row.code}}</span>
                    </div>
                </template>
            </el-table-column>


            <!-- start value -->
            <el-table-column v-if="queryinfo.name2=='字典值'"   prop="id" label="字典值名称"  align="left" >
                <template slot-scope="scope">
                    <div v-if="scope.row.valueList && scope.row.valueList.length > 0">
                        <el-tag  effect="dark" type="plain" v-for="item in scope.row.valueList" :key="item.id" >
                            <span>{{item.name}}</span>
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-if="queryinfo.name2=='字典值'"   prop="id" label="字典值编码"  align="left" >
                <template slot-scope="scope">
                    <div v-if="scope.row.valueList && scope.row.valueList.length > 0">
                        <el-tag  effect="dark" type="plain" v-for="item in scope.row.valueList" :key="item.id" >
                            <span>{{item.code}}</span>
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
            <!-- end value -->


            <!-- start table -->
            <el-table-column v-if="queryinfo.name2=='表格'"   label="表名"  align="center" :width="220" >
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.dictTable" style="font-weight: bold;">{{scope.row.dictTable.tableName}}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column v-if="queryinfo.name2=='表格'"    label="标签字段"  align="center" >
                <template slot-scope="scope">
                    <div v-if="scope.row.dictTable && scope.row.dictTable.labelName && scope.row.dictTable.labelName.length > 0">
                        <el-tag  effect="dark" type="plain" v-for="item in scope.row.dictTable.labelName.split(',')" :key="item" >
                            <span>{{item}}</span>
                        </el-tag>
                    </div>
                </template>
            </el-table-column>


            <el-table-column v-if="queryinfo.name2=='表格'"    label="额外字段"  align="center" >
                <template slot-scope="scope">
                    <div v-if="scope.row.dictTable && scope.row.dictTable.extraName && scope.row.dictTable.extraName.length > 0">
                        <el-tag  effect="dark" type="plain" v-for="item in scope.row.dictTable.extraName.split(',')" :key="item" >
                            <span>{{item}}</span>
                        </el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column v-if="queryinfo.name2=='表格'"    label="过滤字段"  align="center" >
                <template slot-scope="scope">
                    <div v-if="scope.row.dictTable && scope.row.dictTable.filterField && scope.row.dictTable.filterField.length > 0">
                        <el-tag  effect="dark" type="plain" v-for="item in scope.row.dictTable.filterField.split(',')" :key="item" >
                            <span>{{item}}</span>
                        </el-tag>
                    </div>
                </template>
            </el-table-column>

<!--            <el-table-column v-if="queryinfo.name2=='表格'"    label="过滤示例"  align="center" >-->
<!--                <template slot-scope="scope">-->
<!--                    <div>-->
<!--                        <span>{{scope.row.dictTable.filterExample}}</span>-->
<!--                    </div>-->
<!--                </template>-->
<!--            </el-table-column>-->


            <el-table-column v-if="queryinfo.name2=='表格'"   label="过滤部署"  align="center" :width="80" >
                <template slot-scope="scope">
                    <div v-if="scope.row.dictTable">
                        <el-switch v-model="scope.row.dictTable.deployStatus"
                                   :active-value="1"
                                   :inactive-value="0">
                        </el-switch>
                    </div>
                </template>
            </el-table-column>
            <!-- end table -->




        </el-table>

        <!-- 分页器 -->
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>

    </div>
</div>